/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
  <view class="index_class">
    <view class="bus-top">
      <view class="order-filter">
        <view class="items" :class="{'order_active':showingIndex1 == 6}" @tap="showOptions(6)">{{$t('全部')}}</view>
        <view class="items" :class="{'order_active':showingIndex1 == 1}" @tap="showOptions(1)">{{$t('待付款')}}</view>
        <view class="items" :class="{'order_active':showingIndex1 == 2}" @tap="showOptions(2)">{{$t('待发货')}}</view>
        <view class="items" :class="{'order_active':showingIndex1 == 3}" @tap="showOptions(3)">{{$t('待收货')}}</view>
        <view class="items" :class="{'order_active':showingIndex1 == 4}" @tap="showOptions(4)">{{$t('待评价')}}</view>
      </view>
    </view>
    
    <view class="all-order">
      <!--  app 端状态栏站位 -->
      <mescroll-uni
          top="0"
          style="padding-top:0!important"
          :up="upOption"
          @up="upCallback"
          @down="downCallback"
          @init="mescrollInit"
      >
        <view style="background-color:#f4f4f4;margin-top:100upx">
          <view
              class="order_list"
              v-for="(item,index) in list"
              :key="index"
              @click="getnav('/pagesB/seller/orderDetails?order_num=' +item.ordernumber)"
          >
            <view class="order_top">
              <text>{{$t('订单号')}}:{{item.ordernumber}}</text>
              <view>
                <text class="color">{{item.order_zt}}</text>
                
                <i class="iconfont order_all_right"></i>
              </view>
            </view>
            <view class="order_bottom">
              <view class="bottom_img">
                <image class="goods_thumb_url" :src="item.goodsinfo.thumb_url" />
                
                <view class="good-info-wrap">
                  <view class="introduce">{{item.goodsinfo.goods_name}}</view>
                  <view class="goods-num-wrap">
                   {{$t('共1件宝贝,交易金额')}}
                    <text class="goods-price">{{item.goodsinfo.price}}</text>
                  </view>
                </view>
              </view>
              <view class="order-all-text">
                <span
                    v-if="item.goodsinfo.th_status == 1 || item.goodsinfo.th_status == 2 || item.goodsinfo.th_status == 3 "
                >{{$t('退款中')}}</span>
                <span v-else-if="item.goodsinfo.th_status == 4">{{$t('退款完成')}}</span>
                <span
                    v-else-if="item.goodsinfo.th_status == 5 || item.goodsinfo.th_status == 6 || item.goodsinfo.th_status == 7"
                >{{$t('换货中')}}</span>
                <span v-else-if="item.goodsinfo.th_status == 8">{{$t('换货完成')}}</span>
              </view>
            </view>
          </view>
        </view>
      </mescroll-uni>
    </view>
     
  </view>
</template>

<script>
import MescrollUni from "mescroll-uni/mescroll-uni.vue";

export default {
  components: {
    MescrollUni
  },
  onLoad(option) {
    if (option) {
      this.showingIndex1 = option.index ? option.index : 6;
    }
  },
  onShow() {
    this.list = [];
    this.mescroll && this.mescroll.resetUpScroll();
  },
  data() {
    return {
      showingIndex1: 6,
      list: [],
      delSrc:
          "",
      valShow: false,
      valueStatus: 0, // 更新页面状态 防止页面卡死
      
      mescroll: null, //mescroll实例对象
      upOption: {
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 10 // 每页数据的数量
        },
        noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        // empty: {
        //     use: true, // 是否显示空布局
        //     icon: "http://www.mescroll.com/img/mescroll-empty.png", // 图标路径
        //     tip: '~ 暂无相关数据 ~', // 提示
        //     btnText: '去逛逛 >' // 按钮
        // }
        empty: {
          tip: "~ "+this.$t('暂无数据')+" ~", // 提示
          btnText: this.$t('去看看')
        }
      }
    };
  },
  watch: {
    valShow() {
      this.statusMath(this);
    }
  },
  onReachBottom: function() {
    this.mescroll && this.mescroll.onReachBottom();
  },
  //注册列表滚动事件,用于下拉刷新
  onPageScroll(e) {
    this.mescroll && this.mescroll.onPageScroll(e);
  },
  
  methods: {
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    // 下拉刷新的回调
    downCallback(mescroll) {
      mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 )
    },
    /*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
    upCallback(mescroll) {
      var pageNum = mescroll.num; // 页码, 默认从1开始
      var pageSize = mescroll.size; // 页长, 默认每页10条
      this.$http
          .getShopperList({
            filter: this.showingIndex1,
            page: pageNum
          })
          .then(res => {
            if (res.status == 200) {
              res.data.forEach(el => {
                el.icon = false;
              });
              this.mescroll.endByPage(
                  res.data.length,
                  Math.ceil(Number(res.data.length) / pageSize)
              );
              if (pageNum == 1) this.list = []; //如果是第一页需手动制空列表
              this.list = this.list.concat(res.data); //追加新数据
            }
          })
          .catch(err => {
            // 失败隐藏下拉加载状态
            this.mescroll.endErr();
          });
    },
    
    showOptions: function(i) {
      if (this.showingIndex1 == i) return false;
      this.showingIndex1 = i;
      this.list = []; // 在这里手动置空列表,可显示加载中的请求进度
      this.mescroll.resetUpScroll(); // 刷新列表数据
      this.numberpay = false;
    }
  }
};
</script>

<style lang="less" scoped>
page,
.index_class {
  height: 100%;
}
.shou_sure {
  span {
    display: block;
    width: 100upx;
    height: 40upx;
    line-height: 40upx;
    border-radius: 20upx;
    border: 1upx solid #999;
    color: #999;
    text-align: center;
    font-size: 24upx;
  }
}
.padding-btn {
  padding-bottom: 80upx;
}
.goods_thumb_url{
  flex-shrink: 0;
}
.all-order {
  .order_list {
    margin: 20upx;
    border-radius: 14upx;
    overflow: hidden;
    .showDetail {
      display: flex;
      justify-content: space-between;
      padding: 0 25upx 14upx;
      .delBtn {
        width: 48upx;
        height: 48upx;
      }
      .showMoreBtn {
        background-color: #fa3e3f;
        color: #ffffff;
        border-radius: 200upx;
        font-size: 28upx;
        padding: 0upx 20upx;
      }
    }
    .good-info-wrap {
      padding-left: 20upx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex-grow: 2;
      .introduce {
        font-size: 30upx;
      }
      .goods-num-wrap {
        text-align: right;
        .goods-price {
          font-size: 32upx;
          color: #fa3e3f;
          font-weight: 500;
        }
      }
    }
  }
}
</style>
